html {
    font-size: 64px;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
}

body * {
    box-sizing: border-box;
    flex-shrink: 0;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-evenly {
    justify-content: space-evenly;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}


/* header */

.app {
    background-color: #f5f5f5;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.header {
    padding: 0.48rem 0.37rem 0.19rem;
    background-color: #f9f9f9;
    height: 1rem;
    border-bottom: solid 0.01rem #dbdbdb;
    position: relative;
}

.image {
    position: absolute;
    left: 0.39rem;
    bottom: 0.19rem;
    width: 0.17rem;
    height: 0.29rem;
}

.text {
    color: #111010;
    font-size: 0.31rem;
    line-height: 0.3rem;
    letter-spacing: -0.0031rem;
}


/* 以下是卡片区 */

.group {
    padding-bottom: 2.11rem;
    flex: 1 1 auto;
    overflow-y: auto;
}

.space-y-1>*:not(:first-child) {
    margin-top: 0.2rem;
}

.list-item {
    padding: 0.15rem 0.15rem 0 0.25rem;
    background-color: #ffffff;
}

.group_2 {
    padding-left: 0.062rem;
}

.space-x-1>*:not(:first-child) {
    margin-left: 0.31rem;
}

.group_3 {
    margin-bottom: 0.031rem;
    flex: 1 1 auto;
}

.image_2 {
    flex-shrink: 0;
    width: 0.86rem;
    height: 0.85rem;
    border-radius: 0.7031rem;
}

.group_4 {
    flex: 1 1 auto;
    align-self: center;
}

.space-y-2>*:not(:first-child) {
    margin-top: 0.18rem;
}

.font_1 {
    font-size: 0.23rem;
    letter-spacing: -0.0023rem;
    line-height: 0.23rem;
    color: #000;
}

.text_2 {
    margin-top: 0.062rem;
}

.image_3 {
    margin-left: 0.021rem;
    margin-bottom: 0.031rem;
    margin-right: 0.06rem;
    width: 0.26rem;
    height: 0.26rem;
}

.font_3 {
    font-size: 0.19rem;
    font-family: PingFang HK;
    letter-spacing: -0.0019rem;
    line-height: 0.18rem;
    color: #000;
}

.text_4 {
    margin-top: 0.021rem;
}

.text_5 {
    margin-left: 0.25rem;
    margin-top: 0.021rem;
}

.group_5 {
    margin-top: 0.15rem;
    width: 1.07rem;
}

.space-y-3>*:not(:first-child) {
    margin-top: 0.28rem;
}

.font_2 {
    font-size: 0.21rem;
    letter-spacing: -0.002rem;
    line-height: 0.21rem;
    color: #a1a1a1;
}

.text_3 {
    align-self: flex-start;
}

.image_4 {
    align-self: flex-end;
    width: 0.15rem;
    height: 0.25rem;
}

.font_4 {
    font-size: 0.19rem;
    letter-spacing: -0.0019rem;
    line-height: 0.23rem;
    color: #73c6d6;
}

.text_6 {
    margin-left: 0.11rem;
    margin-top: 0.083rem;
    margin-right: .875rem;
    align-self: flex-start;
    line-height: 0.36rem;
}

.group_6 {
    margin-top: 0.13rem;
    padding: 0.21rem 0 0.13rem;
    border-top: solid 0.021rem #9593956b;
}

.space-x-3>*:not(:first-child) {
    margin-left: 0.26rem;
}

.text-wrapper {
    padding: 0.12rem 0;
    flex: 1 1 1.61rem;
    border-radius: 0.041rem;
    height: 0.52rem;
    border: solid 0.021rem #e83c3b;
}

.font_5 {
    font-size: 0.23rem;
    letter-spacing: -0.0023rem;
    line-height: 0.23rem;
    color: #e83c3b;
}

.text-wrapper_2 {
    padding: 0.1rem 0 0.15rem;
    flex: 1 1 1.61rem;
    border-radius: 0.041rem;
    height: 0.52rem;
    border: solid 0.021rem #e83c3b;
}

.text-wrapper_3 {
    margin-right: 0.1rem;
    padding: 0.15rem 0;
    flex: 1 1 1.61rem;
    background-color: #e83c3b;
    border-radius: 0.041rem;
    height: 0.52rem;
}

.font_6 {
    font-size: 0.23rem;
    letter-spacing: -0.0023rem;
    line-height: 0.23rem;
    color: #fbf7f7;
}

.space-x-2>*:not(:first-child) {
    margin-left: 0.16rem;
}

.space-y-28>*:not(:first-child) {
    margin-top: 0.29rem;
}